import React from 'react';
import {
	Box,
	Tabs, 
	TabList, 
	TabPanels,
	Tab,
	TabPanel,
	Image,
	useColorModeValue
} from '@chakra-ui/react';
import SignInComponent from '../../components/sign-in/index.js';
import SignUpComponent from '../../components/sign-up/index.js';

import chakraUILight from '../../assets/images/chakra-ui-light.png';
import chakraUIDark from '../../assets/images/chakra-ui-dark.png';

export default function FormPage() {

	const bgColor = useColorModeValue("gray.200", "gray.700");
	const chakraUI = useColorModeValue(chakraUILight, chakraUIDark);
	
	return (
		<Box bgColor={bgColor} p={3} borderRadius="lg" boxShadow="lg" w="100%">
			<Image w="250px" mx="auto" mt="2" mb="6" src={chakraUI}></Image>
			<Tabs isFitted>
				<TabList>
					<Tab _focus={{boxShadow: 'none'}}>注册</Tab>
					<Tab _focus={{boxShadow: 'none'}}>登录</Tab>
				</TabList>

				<TabPanels>
					<TabPanel>
						<SignUpComponent></SignUpComponent>
					</TabPanel>
					<TabPanel>
						<SignInComponent></SignInComponent>
					</TabPanel>
				</TabPanels>
			</Tabs>
		</Box>
	)
}